/**
 * Created by zcy-fover on 2017/3/5.
 */
function showPic(whichPic) {
    if (!document.getElementById("placeholder")){
        return false;
    }
    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    // placeholder.src = source;   该句的效果与上句相同

    if (document.getElementById("description")){
        var text = whichPic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    return true;
}

/**
 * 上面函数的改进版，以便该js可以很好的支持所有的浏览器，
 * 可以最大程度上的保证网页功能正常
 * 把HTML代码和js很好的分离
 */
function prepareGallery() {
    if (!document.getElementsByTagName){
        return false;
    }
    if (!document.getElementById){
        return false;
    }
    if (!document.getElementById("imageGallery")){
        return false;
    }

    var gallery = document.getElementById("imageGallery");
    var links = gallery.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++){
        links[i].onclick = function () {
            //如果图片替换成功，则把点击连接跳转的效果取消，否则就会执行点解<a>新打开页面的效果
            return  showPic(this) ? false : true;
        }
        // links[i].onkeypress = links[i].onclick;
        //可以使支持键盘事件，但onkeypress可能并不是想象中的那么好用
        //其实onclick事件对于键盘事件的支持也是相当好的
    }
}

/**
 * 虽然可看到的body的子节点有3个，但实际的文档树节点类型并非只有元素节点
 * 元素节点类型共有12种，常用的是3种：
 *      元素节点的nodeType属性值是1；
 *      属性节点的nodeType属性值是2；
 *      文本节点的nodeType属性值是3；
 */
function countChildNode() {
    var bodyElement = document.getElementsByTagName("body")[0];
    alert(bodyElement.childNodes.length);
}

// window.onload = countChildNode;

addLoadEvent(prepareGallery);